<template>
    <div>
        <div class="container">
              <el-carousel indicator-position="outside">
            <el-carousel-item v-for="item in 3" :key="item"> </el-carousel-item>
        </el-carousel>
            <h1 style="margin-top: 15px">上门取件</h1>
            <el-divider></el-divider>
            <el-form  ref="appoint" style="margin-top: 15px;" :model="appointment" :rules="rules" label-width="80px">
                <el-form-item label="上门地址" prop="appointment_address" required>
                    <el-input v-model="appointment.appointment_address" clearable style="width:220px;"></el-input>
                </el-form-item>
                <el-form-item label="上门时间" prop="appointment_time" required>
                    <el-col :span="11" >
                        <el-date-picker
                            v-model="appointment.appointment_time"
                            type="datetime"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                        >
                        </el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="需要包装" prop="packaging" required>
                    <el-switch v-model="appointment.packaging"></el-switch>
                </el-form-item>
                <el-form-item label="备注" prop="context">
                    <el-input type="textarea"  v-model="appointment.context" style="width:300px;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit()">立即预约</el-button>
                    <el-button @click="resetForm('appoint')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    // vue名字
    name: 'PackageStranded',
    // 数据
    data() {
        return {
            appointment_detail: {},
            appointment: {
                appointment_address: '',
                appointment_time: '',
                packaging: 1,
                context: '',
                user_id: null
            },
            rules: {
                appointment_address: [{ message: '请输入上门地址', required: true, trigger: 'blur' }],
                // appointment_time: [{ type: 'datetime', required: true, message: '请选择上门日期', trigger: 'change' }],
                packaging: [{ message: '请选择是否需要包装', required: true, trigger: 'change' }]
            }
        };
    },
    // 方法
    methods: {
        //重置
        resetForm(appoint) {
                this.$refs[appoint].resetFields();
            
        },
        onSubmit() {
            this.$refs.appoint.validate((valid) => {
                if (valid) {
                    if (this.appointment.packaging == true) {
                        this.appointment.packaging = 1;
                    } else {
                        this.appointment.packaging = 0;
                    }
                    this.appointment.user_id = localStorage.getItem('user_id');
                    const _this = this;
                    this.$axios({
                        method: 'POST',
                        url: 'appointment/add',
                        data: JSON.stringify(this.appointment),
                        headers: { 'Content-Type': 'application/json' } //加上这个
                    })
                        .then(function (res) {
                            console.log(res);
                            if (res.data.code == 1) {
                                _this.$message({
                                    type: 'success',
                                    message: '预约成功!等待快递员上门！'
                                });
                                // _this.$router.go(0)
                            } else {
                                _this.$message.err('预约失败！');
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                        });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    },
    // 页面初始化生命周期函数
    created() {}
};
</script>
// 样式
<style scoped>
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

.el-carousel__item:nth-child(n) {
    background-color: #99a9bf;
    /* background-image: url(); */
    background-image: url(../../../assets/img/appointment2.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
    background-image: url(../../../assets/img/appointment1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
.el-carousel__item:nth-child(3) {
    background-color: #d3dce6;
    background-image: url(../../../assets/img/appointment3.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
</style>